<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi filter</title>
  <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        display: block;
        background: blue;
      }
      .op-btn {
        position: absolute;
        z-index: 3;
        top: 10px;
        left: 10px;
      }
  </style>
</head>
<body>
<script src="../lib/pixi.js"></script>
<script src="../lib/pixi-filters.js"></script>
<script type="text/javascript">
  window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要！！
    e.preventDefault();
  }

  const app = new PIXI.Application();
  document.body.appendChild(app.view);

  app.stage.position.set(400, 300);

  const outlineFilterGreen = new PIXI.filters.OutlineFilter(2, 0x99ff99);
  const outlineFilterRed = new PIXI.filters.GlowFilter(15, 2, 1, 0xff9999, 0.5);

  function filterOn() {
    this.filters = [outlineFilterRed];
  }

  function filterOff() {
    this.filters = [outlineFilterGreen];
  }

  for (let i = 0; i < 20; i++) {
    const bunny = PIXI.Sprite.from('../assets/bunny.png');
    bunny.interactive = true;
    bunny.position.set((Math.random() * 2 - 1) * 300 | 0, (Math.random() * 2 - 1) * 200 | 0);
    bunny.scale.x = (Math.random() * 3 | 0 * 0.1) + 1;
    bunny.on('pointerover', filterOn)
      .on('pointerout', filterOff);
    filterOff.call(bunny);
    app.stage.addChild(bunny);
  }

</script>
</body>
</html>
